<template>
	<view>
		<view class="good-img">
			<img :src="shopInfo.image" alt="" style="width: 100%;height: 100%;" />
		</view>
		<view class="good-container">
			<view class="good-name">{{shopInfo.name}}</view>
			<view class="good-type">{{shopInfo.typeName}}</view>
			<view class="good-jifen">
				<view class="gj-left">
					{{shopInfo.pointsValue}} <text style="font-size: 30rpx;">积分</text>
				</view>
				<view class="gj-right">库存{{shopInfo.quantity}}</view>
			</view>
		</view>
		<view class="good-space"></view>
		<view class="good-content">
			<view class="detail-name">商品详情</view>
			<view class="detail-content" v-html="shopInfo.content">
				<!-- {{}} -->
			</view>
		</view>
		<view class="good-shop">
			<view class="gs-left" @click="shopCarBtn">
				<u-badge type="error" :count="shopNum" offset="[-10,-10]"></u-badge>
				<view class="sl-top">
					<img src="@/static/info/gouwuche.png" alt="" style="width: 100%;height: 100%;" />
				</view>
				<view class="sl-bottom">购物车</view>
			</view>
			<view class="gs-add" style="background-color: #e78b00;" @click="addBtn">加入购物车</view>
			<view class="gs-add" style="background-color: #e53d3d;" @click="orderModalShowBtn">
				立刻兑换
			</view>
		</view>
		<u-modal v-model="orderModalShow" :show-title="false" :show-cancel-button="true" @confirm="orderSubmit">
			<view class="slot-content">
				确认提交到订单吗？
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getPointsItemDetail,
		addPointsCart,
		getPointsOrder,
		getPointsCart,
		modifyPointsCar
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				shopNum: 0,
				shopId: '',
				shopInfo: {},
				shopIndex: 0,
				orderModalShow: false,
				myPoints:uni.getStorageSync('trainneInfo')?Number(uni.getStorageSync('trainneInfo').points) :0,
				shopCartList:[],
				id:''
			}
		},
		onLoad(options) {
			console.log("options.id",options.id);
			this.shopId = options.id
            this.getPointsCart()
			this.getPointsItemDetail()
		},
		methods: {
			orderModalShowBtn() {
				this.orderModalShow = true
			},
			async orderSubmit() {
				if(Number(this.myPoints) < Number(this.shopInfo.pointsValue) ){
					uni.showToast({
						title: '当前积分不足',
						icon: 'none'
					})
				}else{
					const data = {
						artPointsOrderItems: [{
							itemId: this.shopInfo.id,
							quantity: 1,
						}]
					}
					const res = await getPointsOrder(data)
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
					}
				}
				

			},
			async getPointsItemDetail() {
				console.log("this.shopId", typeof(this.shopId), this.shopId);
				uni.showLoading()
				const {
					code,
					data
				} = await getPointsItemDetail(this.shopId)
				if (code == 200) {
					uni.hideLoading()
					this.shopInfo = data
				}
			},
			shopCarBtn() {
				uni.navigateTo({
					url: '/pages/info/shopCar'
				})
			},
			
			async getPointsCart() {
				uni.showLoading()
				const {
					code,
					rows
				} = await getPointsCart()
				if (code == 200) {
					uni.hideLoading()
					this.shopCartList = rows
				   this.shopNum = this.shopCartList.reduce((acc, cur) => {
						return acc + parseInt(cur.quantity);
					}, 0);
					console.log("this.shopNum",this.shopNum);
				}
			},
			
			
			 addBtn() {
				if (this.shopNum > this.shopInfo.quantity) {
					uni.showToast({
						title: `库存不足啦`,
						icon: 'none',
						duration: 2000
					});
				} else {
					 if(this.shopCartList.length !== 0){
						 const obj = this.shopCartList.find(item => item.itemId === this.shopInfo.id);
						 console.log(obj,"obj");
						 if(obj == undefined){
							 console.log("xinzeng");
							 return this.addPointsCart()
						 }else{
							 console.log("xiugai");
							 this.id = obj.id
							 return this.modifyPointsCar()
						 }
						 
					 }else{
						 console.log("初次");
						return this.addPointsCart()
					 }
				
				}


			},
			async addPointsCart(){
				this.shopNum = this.shopNum + 1
			
				const data = {
					itemId: this.shopInfo.id,
					pointQuantity: this.shopInfo.pointsValue,
					quantity: 1,
					traineeId: uni.getStorageSync('trainId')
				}
				const res = await addPointsCart(data)
				if(res.code === 200){
					  this.getPointsCart()
				}
			},
			async modifyPointsCar(item){
					this.shopNum = this.shopNum + 1
					this.shopIndex = this.shopIndex + 1
				uni.showLoading()
				const data = {
					id:this.id,
					quantity:this.shopIndex + 1,
					pointQuantity:this.shopInfo.pointsValue,
					itemId:this.shopInfo.id,
					traineeId: uni.getStorageSync('trainId')
				}
				const {
					code,
					rows
				} = await modifyPointsCar(data)
				if(code === 200){
					// this.getPointsCart()
				}
			},
			
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style>
	.good-img {
		height: 500rpx;
	}

	.good-container {
		padding: 20rpx;
	}

	.good-name {
		font-weight: bold;
		font-size: 34rpx;
	}

	.good-type {
		border: 2rpx solid #f7a529;
		width: 120rpx;
		text-align: center;
		line-height: 40rpx;
		height: 40rpx;
		font-size: 24rpx;
		margin-top: 20rpx;
		color: #f7a529;
	}

	.good-jifen {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.gj-left {
		font-size: 40rpx;
		color: #fd0303;

	}

	.gj-right {
		color: #b8b6b6;
		margin-top: 8rpx;
	}

	.good-space {
		width: 100%;
		height: 20rpx;
		background-color: #efefef;
	}

	.good-content {
		padding: 40rpx 20rpx;

	}

	.detail-name {
		font-weight: bold;
		font-size: 34rpx;
	}

	.detail-content {
		margin-top: 20rpx;
		color: #b8b6b6;
	}

	.good-shop {
		position: fixed;
		bottom: 0;
		display: flex;
		height: 110rpx;
		width: 100%;
		box-shadow: 2rpx 2rpx 12rpx #b8b6b6;

	}

	.sl-top {
		width: 50rpx;
		height: 50rpx;
		margin: 0 auto;
		margin-top: 10rpx;
	}

	.gs-left {
		width: 30%;
		height: 100%;
		text-align: center;
		position: relative;
	}

	.gs-add {
		width: 35%;
		height: 110rpx;
		line-height: 110rpx;
		text-align: center;
		font-size: 36rpx;
		color: #fff;
	}

	.slot-content {
		text-align: center;
		margin: 60rpx 0;
	}
</style>